<template>
    <div class="_sidebar">
        <input type="checkbox" id="_scheck">
        <div class="_maincircle">
            <div class="_arrowr"></div>
            <div class="trafficlight">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="_circle1" @click="clickevent(1)">Me</div>
        <div class="_circle2" @click="clickevent(2)">Out</div>
    </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
    position: {
        type: [String],
        default: 'fixed'
    },


})
let _position = computed({
    get: () => {
        return props.position
    },
})
const emit = defineEmits(['clickEvent']);
let clickevent = (index) => {
    emit('clickEvent', index)
}
</script>

<style lang="scss" scoped>
._sidebar {
    position: v-bind(_position);
    height: 180px;
    width: 50px;
    display: flex;
    right: -25px;
    bottom: 100px;
    #_scheck {
        cursor: pointer;
        z-index: 111;
        appearance: none;
        -webkit-appearance: none;
        background-color: transparent;
    }
    #_scheck,
    ._maincircle,
    ._circle1,
    ._circle2 {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        bottom: 0;
    }
    ._maincircle,
    ._circle1,
    ._circle2 {
        cursor: pointer;
        box-shadow: 0px 0px 3px 1px #ddd0d0;
    }
    ._circle1,
    ._circle2 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    ._maincircle {
        z-index: 10;
        //background-color: rgb(233, 116, 116);
        background: radial-gradient(
            circle at 50% 50%,
            rgb(230, 77, 77) 0%,
            rgb(237, 102, 102) 50%,
            #d7f3d7 100%
        );
        transition: transform 0.3s ease-in;
        .trafficlight {
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;

            & > div {
                transform: translateX(-5px);
                width: 6px;
                height: 6px;
                border-radius: 50%;
                &:nth-child(1) {
                    background-color: red;
                    //filter: blur(1px);
                    animation: 0.5s traffic ease-in-out infinite;
                }
                &:nth-child(2) {
                    background-color: yellow;
                    //filter: blur(1px);
                    animation: 0.5s traffic ease-in-out infinite;
                    animation-delay: 0.5s;
                }
                &:nth-child(3) {
                    background-color: rgb(30, 242, 108);
                    //filter: blur(1px);
                    animation: 0.5s traffic ease-in-out infinite;
                    animation-delay: 1s;
                }
                @keyframes traffic {
                    0% {
                        box-shadow: 0px 0px 3px 1px #c9c5c5;
                    }
                    100% {
                        box-shadow: unset;
                    }
                }
            }
        }
    }
    ._circle1 {
        z-index: 9;
        background: radial-gradient(
            circle at 50% 50%,
            rgb(223, 217, 40) 0%,
            rgb(230, 237, 102) 50%,
            #d7f3d7 100%
        );
        transition: transform 0.3s ease-in;
    }
    ._circle2 {
        z-index: 8;
        background-color: rgb(30, 242, 108);
        transition: transform 0.5s ease-in;
        background: radial-gradient(
            circle at 50% 50%,
            rgb(50, 228, 40) 0%,
            rgb(135, 233, 102) 50%,
            #d7f3d7 100%
        );
    }
    #_scheck:checked {
        transform: translateX(-45px);
    }
    #_scheck:checked ~ ._maincircle {
        transform: translateX(-45px);
        .trafficlight {
            flex-direction: row;
            & > div {
                transform: translateX(0px);
            }
        }
    }
    #_scheck:checked ~ ._circle1 {
        transform: translate(-45px, -60px);
    }
    #_scheck:checked ~ ._circle2 {
        transform: translate(-45px, -120px);
    }
}
</style> 